<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css浮动</title>
     <style>
        .father{
            background-color: greenyellow;
            /* height: 150px; */
            border: 3px solid brown;
            /* overflow: hidden; */
        }

        /* .father::after{
            content: "";
            display: table;
            clear: both;
        } */

        .left-son{
            background-color: rgb(6, 151, 255);
            height: 100px;
            width: 100px;
            float: left;

        }
        .right-son{
            background-color: rgb(255, 0, 0);
            height: 100px;
            width: 100px;
            float: right;
        }
     </style>
</head>
<body>
 <!-- 网页布局方式有以下五种:
   1 标准流(普通流、文档流):网页按照元素的书写顺序依次排列
   2 浮动
   3 定位
   4 `Flexbox`
   5 `Grid`(自适应布局)
   标准流·是由块级元素和行内元素按照默认规定的方式来排列，
    块级就是占一行，行内元素一行放好多个元素。 -->

    <!-- 元素脱离文档流，根据开发者的漂浮到网页的任意方向， -->
    <!-- 浮动·属性用于创建浮动框，将其移动到一边，
    直到左边缘或右边缘触及包含块或另一个浮动框的边缘，
    这样即可使得元素进行浮动。
    语法:
    选择器{
    float: left/right/none;
    }
    注意:浮动是相对于父元素浮动，只会在父元素的内部移动 -->

    <!-- 脱标:脱离标准流。
    一行显示，顶部对齐
    具备行内块元素特性 -->
    <div class="father">
        <div class="left-son"></div>
        <div class="right-son"></div>
       
    </div>
    <p>asssssssssssssssssss</p>
</body>
</html>